<template>
  <div class="editcity">
    <van-popup
      :value="userCity"
      position="bottom"
      :style="{ height: '40%' }"
      style="overflow-y: hidden"
      @click-overlay="$emit('input', false)"
    >
      <van-area
        :area-list="areaList"
        :columns-num="2"
        @cancel="handleBack"
        @confirm="editCityButton"
      />
    </van-popup>
  </div>
</template>

<script>
import { auEdit } from '@/api/my.js'
import { areaList } from '@vant/area-data'
export default {
  name: 'EditCity',
  props: {
    userCity: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'userCity'
  },
  data () {
    return { areaList }
  },
  methods: {
    // 修改城市
    async editCityButton (data) {
      const cityName = data[1].name
      const res = await auEdit({ area: cityName })
      if (res.message === 'success') {
        this.$toast.success('修改成功')
        this.handleBack()
      }
    },
    // 关闭弹窗
    handleBack () {
      this.$emit('refreshPage')
      this.$emit('input', false)
    }
  }
}
</script>

<style></style>
